<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片预加载</title>
		<style type="text/css">
			html,body{
				width: 100%;
				height: 100%;
			}
			body{
				margin: 0;
			}
			.box{
				text-align: center;
				height: 100%;
			}
			.box>img{
				max-width: 80%;
				max-height: 90%;
			}
			.btn{
				display: inline-block;
				height: 30px;
				line-height: 30px;
				border: 1px solid #CCC0B3;
				text-decoration: none;
				padding: 0 10px ;
				margin-right: 20px;
				margin-left: 20px;
				color: #333333;
			}
			.loading{
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				text-align: center;
				background-color: white;
			}
			.loading>span{
				font-size: 30px;
				margin-top: 200px;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="http://www.i7mu.com/test_img/1.png" alt="pic" />
			<p>
				<a href="javascript:;" class='btn' onclick="Change(-1)" data-control='prev'>上一页</a>
				<span id="page"></span>
				<a href="javascript:;" class='btn' onclick="Change(1)" data-control='next'>上一页</a>
			</p>
		</div>
		
		<script src="../js/jquery.min.js"></script>
		<script src="preload.js"></script>
		<script type="text/javascript">
			var imgs = ["http://www.i7mu.com/test_img/1.png",
			"http://www.i7mu.com/test_img/2.png",
			"http://www.i7mu.com/test_img/3.png",
			"http://www.i7mu.com/test_img/4.png",
			"http://www.i7mu.com/test_img/5.png",
			"http://www.i7mu.com/test_img/6.png",
			"http://www.i7mu.com/test_img/7.png"]
			var index = 0 
			var len = imgs.length
			Change(0)
			//翻页
			function Change(num){
				console.log(num)
				if((index+num)>-1&&(index+num)<len){
					index = index + num
					console.log(index)
				}else{
					return
				}
				$('#page').text((index+1) + '/' + len)
				$('img').attr('src',imgs[index])
			}
			$.preload(imgs,{
				order:'ordered',
				each:function(count){
						
				},
				all:function(){
					$('.loading').hide()
				}
			})
		</script>
	</body>
</html>
